<template>
	<div class="time">
		<div class="left"><left-column></left-column></div>
		<div style="flex: 1;">
			<!-- 日历 -->
			<el-calendar v-model="currDate">
				<template slot="dateCell" slot-scope="{ data }">
					<div @click="showEvent(data.day)" @mouseenter="hover(data.day)" @mouseleave="move(data.day)">
						<p :class="data.isSelected ? 'is-selected' : ''" style="font-size: large;margin-bottom: 0;">
							{{
								+data.day
									.split('-')
									.slice(2)
									.join('')
							}}
						</p>
						<!-- 当天的主要内容 -->
						<div style="display: flex;flex-wrap: nowrap;justify-content: center;">
							<el-button @click.stop="inputChange" v-show="hoverDate == data.day" type="primary" icon="el-icon-edit" size="mini" circle></el-button>
							<span v-show="itemList[data.day]" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ itemList[data.day] }}</span>
						</div>
					</div>
				</template>
			</el-calendar>
			<!-- 添加当天事件 -->
			<el-dialog title="添加事件" :visible.sync="dialogFormVisible">
				<el-input v-model="input" autocomplete="off"></el-input>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="sureEvent">确 定</el-button>
				</div>
			</el-dialog>

			<!-- 显示当天详细的行程安排 -->
			<el-dialog title="当日安排" :visible.sync="dialogTableVisible"  @click="dialogTableVisible = true">
				<div v-for="(item, index) in detailDate" :key="index" style="display: flex;flex-direction: row;margin-bottom: 10px;align-items: center;">
					<el-time-picker
						is-range
						v-model="item.value"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						placeholder="选择时间范围"
						style="margin-right: 10px;"
					></el-time-picker>
					<el-input @change="sureDetail(index)" v-model="item.content" placeholder="行程安排" :value="item.content"></el-input>
					<svg @click="deleteDetail(index)" class="icon" aria-hidden="true" style="font-size: 35px;margin-left: 5px; cursor: pointer;">
						<use xlink:href="#icon-cuo"></use>
					</svg>
				</div>
				<svg @click="inputDetail" class="icon" aria-hidden="true" style="font-size: 20px;margin-top: 20px;cursor: pointer;"><use xlink:href="#icon-plus"></use></svg>
				<div slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogTableVisible = false">确 定</el-button></div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import leftColumn from './leftColumn.vue';
export default {
	components: {
		leftColumn
	},
	data() {
		return {
			dayAry: [],
			currDate: new Date(),
			//当天的详细事件
			detailDate: [
				// {
				// 	value: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
				// 	content: '',
				// 	id: 1
				// }
			],
			detaliDateID: {},

			/* 本月主要事件 */
			itemList: {
				// '2021-04-25': '本月第一条内容ddddddddddddddddddddddddddddd',
				// '2021-04-26': '内容',
				// '2021-04-07': '本月第三条内容'
			},
			AlldateID: {}, //主要内容天数和id的唯一标识

			clickDate: '', //点击的目标
			addDate: '',
			input: '', //编写当天的内容
			dialogFormVisible: false,
			dialogTableVisible: false,
			formLabelWidth: '100px',
			hoverDate: ''
		};
	},

	methods: {
		//设置移入和移出显示的编辑按钮
		hover(e) {
			this.hoverDate = e;
			this.input = this.itemList[e];
		},
		move() {
			this.hoverDate = '';
		},

		/* 当天主要内容 */
		//显示当前月的安排
		showAllEvent(ym) {
			let t = this.$utils.dealTime(ym);
			this.$api.showMonthRecord(localStorage.uid, t.slice(0, 7)).then(res => {
				let list = res.data;
				for (let i = 0; i < list.length; i++) {
					let date = t.slice(0, 7) + '-' + list[i].dd;
					this.$set(this.itemList, date, list[i].content);
					this.$set(this.AlldateID, date, list[i].id); //保存id键名
				}
			});
		},
		//添加事件
		inputChange() {
			//设置为全局变量
			this.$globalVariant.hoverDate = this.hoverDate;
			this.dialogFormVisible = true;
			this.addDate = this.hoverDate;
			console.log(this.hoverDate);
		},
		// 确认添加
		sureEvent() {
			let addDate = this.addDate;
			this.$api
				.updateMonthRecord({
					ym: this.$globalVariant.hoverDate.slice(0, 7),
					dd: this.$globalVariant.hoverDate.slice(8),
					content: this.input,
					id: this.AlldateID[this.addDate],
					uid: localStorage.uid
				})
				.then(res => {
					if (res) {
						this.$notify({
							title: '成功',
							message: '修改成功',
							type: 'success'
						});
						this.itemList[addDate] = this.input;
					} else {
						this.$notify.error({
							title: '错误',
							message: '好像网络状态不加喔~'
						});
					}
				});
			this.dialogFormVisible = false;
		},

		/* 当天详情 */
		//显示当天的安排
		showEvent(e) {
			this.clickDate = e;
			this.dialogTableVisible = true;
			this.$api
				.showRecord({
					uid: localStorage.uid,
					startTime: new Date(e + ' ' + '00:00'),
					endTime: new Date(e + ' ' + '23:59')
				})
				.then(res => {
					if (res.data.length > 0) {
						this.detailDate = [];
						for (let i = 0; i < res.data.length; i++) {
							this.detailDate.push({
								value: [res.data[i].startTime, res.data[i].endTime],
								content: res.data[i].content,
								id: res.data[i].id
							});
						}
					} else if(res.data.length == 0 && this.detailDate == 0 ) {
						this.detailDate.push({
							value: [new Date(e), new Date(e)],
							content: ''
						});
					}
				});
		},
		//添加事件
		inputDetail() {
			this.detailDate.push({
				value: [new Date(this.clickDate), new Date(this.clickDate)],
				content: ''
			});
		},
		// 确认添加当天详情事件
		sureDetail(index) {
			console.log(this.detailDate[index]);
			this.$api
				.updateRecord({
					startTime: this.detailDate[index].value[0],
					endTime: this.detailDate[index].value[1],
					content: this.detailDate[index].content,
					uid: localStorage.uid,
					id: this.detailDate[index].id ? this.detailDate[index].id : ''
				})
				.then(res => {
					if (res) {
						this.$notify({
							title: '成功',
							message: '操作成功',
							type: 'success'
						});
						this.showEvent(this.clickDate);
					} else {
						this.$notify.error({
							title: '错误',
							message: '好像网络状态不加喔~'
						});
					}
				});
		},
		//删除当前段的事件
		deleteDetail(index) {
			console.log(this.detailDate[index].id);
			console.log(this.detailDate[index]);
			let id = this.detailDate[index].id;
			this.$api.deleteReocrd(id).then(res => {
				if (res) {
					this.$notify({
						title: '成功',
						message: '删除成功',
						type: 'success'
					});
					this.detailDate.splice(index, 1);
				} else {
					this.$notify.error({
						title: '错误',
						message: '好像网络状态不加喔~'
					});
				}
			});
		}
	},

	created: function() {
		// 获取当天内容
		this.showAllEvent(this.currDate);
		this.$nextTick(() => {
			// 点击前一个月
			let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
			prevBtn.addEventListener('click', () => {
				this.showAllEvent(this.currDate);
			});

			//点击下一个月
			let nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
			nextBtn.addEventListener('click', () => {
				this.showAllEvent(this.currDate);
			});

			//点击今天
			let todayBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
			todayBtn.addEventListener('click', () => {
				this.showAllEvent(this.currDate);
			});
		});
	},
	mounted() {
		var content = document.getElementsByClassName('el-calendar-day');
		for (let i of content) {
			i.style.height = '75px';
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
.left {
	width: 13%;
	height: 100vh;
	background-color: #2c3e50;
}
.time {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.calendar {
	height: 100%;
	background-color: beige;
}
.calendarHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 5%;
	padding: 0 40px;
}
.dateHeader {
	display: flex;
	justify-content: space-around;
	height: 5%;
}
.headerItem {
	margin-right: 8%;
	margin-left: 10px;
}
.date {
	display: flex;
	flex-wrap: wrap;
}
.dateItem {
	flex: 1;
	height: 40px;
	border: gray 1px solid;
	min-width: 14%;
	height: 177px;
}
</style>
